'use client';

import { useEffect, useState } from 'react';

interface VersionInfo {
  package: string;
  currentVersion: string;
  latestVersion?: string;
  status: 'up-to-date' | 'outdated' | 'unknown';
}

export default function Settings() {
  const [versions, setVersions] = useState<VersionInfo[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchVersions = async () => {
      try {
        const versionsData: VersionInfo[] = [
          {
            package: 'Next.js',
            currentVersion: '15.5.4',
            latestVersion: '15.5.4',
            status: 'up-to-date'
          },
          {
            package: 'React',
            currentVersion: '19.1.0',
            latestVersion: '19.1.0',
            status: 'up-to-date'
          },
          {
            package: 'TypeScript',
            currentVersion: '^5',
            latestVersion: '5.7.2',
            status: 'up-to-date'
          },
          {
            package: 'Tailwind CSS',
            currentVersion: '^4',
            latestVersion: '4.0.0',
            status: 'up-to-date'
          }
        ];
        
        setVersions(versionsData);
      } catch (error) {
        console.error('Error fetching versions:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchVersions();
  }, []);

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'up-to-date': return 'text-green-600 bg-green-100';
      case 'outdated': return 'text-yellow-600 bg-yellow-100';
      default: return 'text-gray-600 bg-gray-100';
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-lg">Loading settings...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-4 sm:p-6">
      <div className="max-w-6xl mx-auto">
        {/* Header Section */}
        <div className="mb-8">
          <div className="flex items-center mb-2">
            <div className="bg-blue-600 p-3 rounded-xl shadow-lg mr-4">
              <i className="fa fa-cog text-2xl text-white"></i>
            </div>
            <div>
              <h1 className="text-3xl font-bold text-slate-800">Project Settings</h1>
              <p className="text-slate-600">Configuration and version information for your monorepo</p>
            </div>
          </div>
        </div>

        {/* Project Information Card */}
        <div className="bg-white rounded-2xl shadow-lg border border-slate-200 mb-8 overflow-hidden">
          <div className="p-6 border-b border-slate-200 bg-gradient-to-r from-blue-50 to-slate-50">
            <div className="flex items-center">
              <div className="bg-blue-100 p-2 rounded-lg mr-3">
                <i className="fa fa-info-circle text-lg text-blue-600"></i>
              </div>
              <h2 className="text-xl font-semibold text-slate-800">Project Information</h2>
            </div>
          </div>
          
          <div className="p-6">
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              <div className="flex items-center p-4 bg-slate-50 rounded-xl">
                <div className="bg-blue-100 p-3 rounded-lg mr-4">
                  <i className="fa fa-folder text-blue-600"></i>
                </div>
                <div>
                  <div className="text-sm text-slate-600">Root Directory</div>
                  <div className="text-slate-800 font-medium text-sm truncate">/Users/zhengxin/CODES/2025/nextjs-get-started</div>
                </div>
              </div>
              
              <div className="flex items-center p-4 bg-slate-50 rounded-xl">
                <div className="bg-green-100 p-3 rounded-lg mr-4">
                  <i className="fa fa-sitemap text-green-600"></i>
                </div>
                <div>
                  <div className="text-sm text-slate-600">Workspace Pattern</div>
                  <div className="text-slate-800 font-medium">packages/*</div>
                </div>
              </div>
              
              <div className="flex items-center p-4 bg-slate-50 rounded-xl">
                <div className="bg-purple-100 p-3 rounded-lg mr-4">
                  <i className="fa fa-cubes text-purple-600"></i>
                </div>
                <div>
                  <div className="text-sm text-slate-600">Total Packages</div>
                  <div className="text-blue-600 font-bold text-xl">2</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Version Information Card */}
        <div className="bg-white rounded-2xl shadow-lg border border-slate-200 mb-8 overflow-hidden">
          <div className="p-6 border-b border-slate-200 bg-gradient-to-r from-green-50 to-slate-50">
            <div className="flex items-center">
              <div className="bg-green-100 p-2 rounded-lg mr-3">
                <i className="fa fa-code text-lg text-green-600"></i>
              </div>
              <h2 className="text-xl font-semibold text-slate-800">Package Versions</h2>
            </div>
          </div>
          
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-slate-50">
                <tr>
                  <th className="text-left py-4 px-6 font-semibold text-slate-600">
                    <i className="fa fa-cube mr-2"></i>
                    Package
                  </th>
                  <th className="text-left py-4 px-6 font-semibold text-slate-600">
                    <i className="fa fa-tag mr-2"></i>
                    Current Version
                  </th>
                  <th className="text-left py-4 px-6 font-semibold text-slate-600">
                    <i className="fa fa-star mr-2"></i>
                    Latest Version
                  </th>
                  <th className="text-left py-4 px-6 font-semibold text-slate-600">Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
                {versions.map((version, index) => (
                  <tr key={version.package} className="hover:bg-slate-50 transition-colors duration-200">
                    <td className="py-4 px-6">
                      <div className="flex items-center">
                        <div className="bg-blue-100 p-2 rounded-lg mr-3">
                          {version.package === 'Next.js' && <i className="fa fa-rocket text-blue-600"></i>}
                          {version.package === 'React' && <i className="fa fa-atom text-purple-600"></i>}
                          {version.package === 'TypeScript' && <i className="fa fa-file-code-o text-orange-600"></i>}
                          {version.package === 'Tailwind CSS' && <i className="fa fa-paint-brush text-green-600"></i>}
                        </div>
                        <span className="font-medium text-slate-800">{version.package}</span>
                      </div>
                    </td>
                    <td className="py-4 px-6">
                      <code className="bg-slate-100 text-slate-800 px-3 py-1 rounded-lg text-sm font-mono border">
                        {version.currentVersion}
                      </code>
                    </td>
                    <td className="py-4 px-6">
                      <code className="bg-blue-100 text-blue-800 px-3 py-1 rounded-lg text-sm font-mono border border-blue-200">
                        {version.latestVersion || 'N/A'}
                      </code>
                    </td>
                    <td className="py-4 px-6">
                      <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(version.status)}`}>
                        {version.status === 'up-to-date' && <i className="fa fa-check-circle mr-1"></i>}
                        {version.status === 'outdated' && <i className="fa fa-exclamation-triangle mr-1"></i>}
                        {version.status === 'unknown' && <i className="fa fa-question-circle mr-1"></i>}
                        {version.status.replace('-', ' ').toUpperCase()}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Additional Information Cards */}
        <div className="grid gap-6 lg:grid-cols-2">
          {/* Development Notes */}
          <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6 border border-blue-200">
            <div className="flex items-center mb-4">
              <div className="bg-blue-100 p-2 rounded-lg mr-3">
                <i className="fa fa-lightbulb-o text-blue-600"></i>
              </div>
              <h3 className="font-semibold text-slate-800">Development Notes</h3>
            </div>
            <ul className="space-y-3">
              <li className="flex items-center text-slate-700">
                <i className="fa fa-check text-green-500 mr-3"></i>
                <span className="text-sm">Both packages use Next.js 15.5.4</span>
              </li>
              <li className="flex items-center text-slate-700">
                <i className="fa fa-check text-green-500 mr-3"></i>
                <span className="text-sm">React 19.1.0 is the latest stable version</span>
              </li>
              <li className="flex items-center text-slate-700">
                <i className="fa fa-check text-green-500 mr-3"></i>
                <span className="text-sm">All dependencies are up to date</span>
              </li>
              <li className="flex items-center text-slate-700">
                <i className="fa fa-check text-green-500 mr-3"></i>
                <span className="text-sm">Project uses TypeScript and Tailwind CSS</span>
              </li>
            </ul>
          </div>

          {/* Status Indicators */}
          <div className="grid gap-4">
            <div className="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 border border-green-200">
              <div className="flex items-center mb-3">
                <div className="bg-green-100 p-2 rounded-lg mr-3">
                  <i className="fa fa-shield text-green-600"></i>
                </div>
                <h3 className="font-semibold text-slate-800">Security Status</h3>
              </div>
              <div className="flex items-center text-green-700">
                <i className="fa fa-check-circle mr-2"></i>
                <span className="text-sm">All packages are secure and up-to-date</span>
              </div>
            </div>
            
            <div className="bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-6 border border-orange-200">
              <div className="flex items-center mb-3">
                <div className="bg-orange-100 p-2 rounded-lg mr-3">
                  <i className="fa fa-bell text-orange-600"></i>
                </div>
                <h3 className="font-semibold text-slate-800">Notifications</h3>
              </div>
              <div className="text-orange-700 text-sm">
                Version updates and security alerts will be displayed here
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}